<template>
  <div style="padding: 20px">
    <div style="text-align: center; margin-bottom: 20px">购物车</div>
    <div style="height: calc(100vh - 160px); overflow: auto">

      <div v-if="cartList && cartList.length > 0">
        <van-row
            v-for="(i, index) in cartList"
            :key="index"
            style="
            margin-bottom: 20px;
            border-bottom: 1px solid #e3e3e3;
            background: #fff;
            padding: 20px;
            text-align: center;
          "
        >
          <van-col :span="8" style="text-align: center">
            <img :src="i.img" style="width: 100%" />
          </van-col>

          <van-col :span="12">
            <div style="text-align: left; margin-bottom: 50px">
              {{ i.name }}
            </div>
            <div
                style="display: flex; margin-top: 20px; justify-content: center"
            >

<!--              这段代码是一个 Vue.js 组件，用于显示购物车列表。当购物车列表不为空时，会渲染一个带有购物车商品的列表。具体来说：-->

<!--              1. `<div v-if="cartList && cartList.length > 0">`：当购物车列表不为空且长度大于 0 时，显示该`div`元素及其子元素。-->
<!--              2. `<van-row>`：使用 Vant UI 库中的`van-row`组件创建一个行容器。-->
<!--                3. `v-for="(i, index) in cartList"`：遍历购物车列表，将每个元素赋值给变量`i`，同时获取当前元素的索引值`index`。-->
<!--                4. `:key="index"`：为每个`van-row`元素设置唯一的`key`属性，值为当前元素的索引。-->
<!--                5. `style="margin-bottom: 20px; border-bottom: 1px solid #e3e3e3; background: #fff; padding: 20px;-->
<!--                text-align: center;"`：为每个`van-row`元素设置样式，包括外边距、边框、背景颜色、内边距和文本居中对齐。-->
<!--                6. `<van-col :span="8" style="text-align: center">`：使用 Vant UI 库中的`van-col`组件创建一个占据 8 个栅格的列容器，文本居中对齐。-->
<!--                  7. `<img : style="width: 100%" />`：为每个商品图片设置宽度为 100%。-->
<!--                  8. `<van-col :span="12">`：创建一个占据 12 个栅格的列容器。-->
<!--                    9. `<div style="text-align: left; margin-bottom: 50px">`：-->
<!--                      创建一个文本左对齐的`div`元素，并设置下边距为 50px。-->
<!--                      10. `{{ i.name }}`：显示当前商品的名称。-->
<!--                      11. `<div style="display: flex; margin-top: 20px; justify-content: center">`：-->
<!--                        创建一个使用 Flexbox 布局的`div`元素，设置上边距为 20px，并使子元素水平居中对齐。-->
              <span
                  style="
                  padding: 5px 14px;
                  border-radius: 10px;
                  border: 1px solid #53b175;
                  font-size: 16px;
                  margin-right: 5px;
                "
                  @click="reduceNum(i)"
              >-</span
              >
              <!-- <van-field v-model="i.num" type="number" placeholder="请输入用户名" /> -->

              <input
                  autocomplete="off"
                  style="
                  width: 20px;
                  padding: 5px 14px;
                  border-radius: 10px;
                  border: none;
                  outline: none;
                  font-size: 16px;
                "
                  type="text"
                  inputmode="decimal"
                  v-model="i.num"
              />
<!--              这段代码是一个 Vue.js 组件中的输入框，用于输入数字。具体来说：-->

<!--              1. `autocomplete="off"`：禁用浏览器自动完成功能。-->
<!--              2. `style`属性设置了输入框的样式，包括宽度、内边距、边框圆角、边框样式、轮廓样式和字体大小。-->
<!--              3. `type="text"`：设置输入框的类型为文本。-->
<!--              4. `inputmode="decimal"`：设置输入模式为十进制数字。-->
<!--              5. `v-model="i.num"`：将输入框的值与变量 i 的 num 属性进行双向绑定。-->

              <span
                  @click="addNum(i)"
                  style="
                  padding: 5px 14px;
                  border-radius: 10px;
                  background: #53b175;
                  color: #fff;
                  font-size: 16px;
                "
              >+</span
              >

            </div>

          </van-col>
          <van-col :span="4" style="text-align: right">
            <div style="margin-bottom: 54px" @click="removeProduct(i)">
              <van-icon name="cross" />
            </div>
            <div>
              <span>{{ i.unit }}{{ i.totalPrice }}</span>
            </div>
          </van-col>
        </van-row>
      </div>
      <van-empty description="还没有商品哦" v-else />
    </div>

<!--    这段代码是一个 Vue.js 组件，用于显示购物车列表。当购物车列表不为空时，会渲染一个带有购物车商品的列表。具体来说：-->

<!--    1. `<van-col :span="4" style="text-align: right">`：创建一个占据 4 个栅格的列容器，文本右对齐。-->
<!--    2. `<div style="margin-bottom: 54px" @click="removeProduct(i)">`：创建一个具有点击事件的`div`元素，设置下边距为 54px。点击该元素时，会调用`removeProduct(i)`方法，将当前商品从购物车中移除。-->
<!--      3. `<van-icon name="cross" />`：显示一个名为“cross”的图标。-->
<!--      4. `<div>`：创建一个`div`元素。-->
<!--        5. `<span>{{ i.unit }}{{ i.totalPrice }}</span>`：显示当前商品的单位和总价。-->
<!--        6. `</van-col>`：结束列容器。-->
<!--    7. `</van-row>`：结束行容器。-->
<!--    8. `</div>`：结束购物车列表的`div`元素。-->
<!--  9. `<van-empty description="还没有商品哦" v-else />`：当购物车列表为空时，显示一个空状态，提示“还没有商品哦”。-->

    <div
        style="
        color: #fff;
        background: #53b175;
        width: calc(100% - 40px);
        border-radius: 15px;
        text-align: center;
        position: fixed;
        bottom: 70px;
        margin: 0 auto;
      "
    >
      <div style="padding: 10px 20px" @click="gotoOrder">
        <span> 去结算</span>
      </div>
    </div>

    <div>
      <!-- 底部弹出 -->
      <van-popup closeable
                 v-model:show="showBottom"
                 position="bottom"
                 :style="{ height: '60%' }"
      >
<!--        这段代码是一个 Vue.js 组件中的弹出层，用于显示底部内容。具体来说：-->

<!--        1. `<van-popup closeable>`：创建一个可关闭的弹出层。-->
<!--        2. `v-model:show="showBottom"`：将弹出层的显示状态与变量 showBottom 进行双向绑定。-->
<!--        3. `position="bottom"`：设置弹出层的位置为底部。-->

        <div class="center">
          <div class="head">
            <p>结算</p>
          </div>
          <div class="ta1"></div>
          <div class="b1" >
            <p class="p1">支付</p>
            <div class="ta2">
              <p class="p2">选择方法</p>
              <img src="../assets/右拉.png" />
            </div>
          </div>
          <div class="ta1"></div>
          <div class="b1">
            <p class="p1">付款</p>
            <div class="ta2">
              <img
                  class="t1"
                  src="../assets/g2.png"
                  style="width: 14px; height: 14px"
              />
              <img src="../assets/右拉.png" />
            </div>
          </div>
          <div class="ta1"></div>
          <div class="b1">
            <p class="p1">优惠</p>
            <div class="ta2">
              <p class="p2">精选折扣</p>
              <img src="../assets/右拉.png" />
            </div>
          </div>
          <div class="ta1"></div>
          <div class="b1">
            <p class="p1">总价格</p>
            <div class="ta2">
              <span>
                ¥{{catPrice}}
              </span>
              <img src="../assets/右拉.png" />
            </div>
          </div>
          <div class="ta1"></div>
          <div class="d1">
            <p class="p3">下单既表示您同意我们的</p>
          </div>
          <div class="d2">
            <p>条款</p>
            <p class="p4">和</p>
            <p>条件</p>
          </div>
          <div class="ta3">
            <p>Home</p>
            <p>Profile</p>
          </div>
          <button>确认支付</button>
        </div>
      </van-popup>
    </div>
  </div>
</template>
<script setup>
import { ref, reactive, computed} from "vue";
import { useRouter } from "vue-router";
import { showDialog } from "vant";
import { userStore } from "../store/piniaStore";
import { myMixin } from "./../mixin.js";

const showBottom = ref(false);

const { errorMsgBox, successMsgBox } = myMixin();

const useUserStore = userStore();
const router = useRouter();
let cartList = useUserStore.cartList;
function addNum(i) {
  i.num += 1;
  i.totalPrice = i.num * i.price;

  useUserStore.calcluteCart();
}
const catPrice  = computed(()=>{
  let pirce =0
  cartList.map(item=>{
    pirce += item.num * item.price
  })

  return pirce
})
function reduceNum(i) {
  if (i.num > 0) {
    i.num -= 1;
    i.totalPrice = i.num * i.price;
  }
  useUserStore.calcluteCart();
}
function removeProduct(i) {
  let index1;
  cartList.forEach((element, index) => {
    index1 = index;
    return (element.id = i.id);
  });
  cartList.splice(index1, 1);

  useUserStore.calcluteCart();
  successMsgBox("移除成功");
}
function gotoOrder() {
  if (!cartList || cartList.length <= 0) {
    errorMsgBox("还没有商品哦");
  }
  showBottom.value = true;
}

// 这段代码是一个 Vue.js 组件，用于处理购物车相关的功能。具体来说：
//
// 1. 导入了 Vue.js、Vue Router、Vant UI库和 Pinia Store 的相关模块。
// 2. 定义了一个名为 `showBottom` 的响应式变量，初始值为 `false`。
// 3. 从 `myMixin` 中导入了 `errorMsgBox` 和 `successMsgBox` 两个函数，用于显示错误和成功的提示框。
// 4. 使用 Pinia Store 创建了一个名为 `useUserStore` 的实例，并获取了购物车列表 `cartList`。
// 5. 定义了一个名为 `addNum` 的函数，用于增加购物车中商品的数量，并重新计算总价。
// 6. 定义了一个名为 `catPrice` 的计算属性，用于计算购物车中所有商品的总价。
// 7. 定义了一个名为 `reduceNum` 的函数，用于减少购物车中商品的数量，并重新计算总价。
// 8. 定义了一个名为 `removeProduct` 的函数，用于从购物车中移除指定的商品，并显示成功提示框。
// 9. 定义了一个名为 `gotoOrder` 的函数，用于跳转到订单页面。如果购物车为空，则显示错误提示框；否则，
// 将 `showBottom` 设置为 `true`，显示底部内容。
</script>
<style scoped>
.cat {
  /*width: 360px;*/
  height: 780px;
  background-color: #f9f9f9;
  border-radius: 10px;
}
.cat h4 {
  height: 60px;
  margin-bottom: 5px;
  background-color: rgba(83, 177, 117, 1);
  border-radius: 19px;
  left: 139.83px;
  top: 738.88px;
  opacity: 1;
  /** 文本1 */
  font-size: 18px;
  font-weight: 400;
  letter-spacing: 0px;
  line-height: 60px;
  color: rgba(252, 252, 252, 1);
  text-align: center;
}

.center {
  position: sticky;
  /* width: 280px; */
  bottom: 5px;
  padding: 10px;
  background-color: #f1f2f1;
  border-radius: 20px 20px 0 0;
}
.head {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
.head p {
  margin-left: 10px;
}
/*.head img {*/
/*  width: 25px;*/
/*  height: 25px;*/
/*}*/
/*.jsp-item */
.p3 {
  display: flex;
  margin-left: -60px;
  font-size: 12px;
  color: #7c7c7c;
}
.ta1 {
  margin-top: 5px;
  width: 100%;
  height: 0;
  opacity: 1;
  border: 1px solid rgba(226, 226, 226, 1);
}
.b1 {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.p1 {
  display: flex;
  margin-left: 10px;
  font-size: 14px;
  color: gray;
  flex: 1;
}

.ta2 {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.d1 {
  margin-top: -5px;
  margin-left: 58px;
  display: flex;
  flex-direction: row;
  align-items: center;
}


.d2 {
  margin-top: -20px;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.center p {
  font-size: 12px;
  margin-right: 10px;
}

.p4 {
  color: #7c7c7c;
}

.p2 {
  font-size: 14px;
}

.ta2 img {
  margin-left: 10px;
  width: 8px;
  height: 8px;
}

.t1 {
  width: 30px;
  height: 10px;
}
.ta3 {
  margin-top: -20px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.ta3 p {
  font-size: 12px;
}
button {
  border-radius: 20px;
  border: none;
  background-color: #54b276;
  color: white;
  width: 90%;
  height: 50px;
  margin: 10px 15px;
}
</style>
